<template>
    <div>
        <el-form :model="queryForm" :inline="true">
            <el-form-item>
                <el-input v-model="queryForm.account" clearable placeholder="账号"/>
            </el-form-item>
            <el-form-item>
                <el-input v-model="queryForm.name" clearable placeholder="姓名"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="init()">查询</el-button>
            </el-form-item>
        </el-form>
	</div>
	
	<div style="margin-top: 1%;">
        <el-table :data="tableData" style="width: 100%;" stripe :border="true" highlight-current-row size="large">
        <el-table-column prop="account" label="账号" min-width="150" />
        <el-table-column prop="name" label="姓名" min-width="150" />
        <el-table-column prop="mail" label="邮箱" min-width="180" />
        <el-table-column prop="createTime" label="注册时间" min-width="180" :formatter="formatterTime"/>
        <el-table-column prop="updateTime" label="修改时间" min-width="180" :formatter="formatterTime"/>
        <el-table-column label="操作" min-width="200">
            <template #default="scope">
            <el-button size="small" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
            <el-button size="small" type="danger" v-if="scope.row.lockFlag === 0" @click="handleLock(scope.row)">锁定</el-button>
            <el-button size="small" type="danger" v-else @click="handleUnLock(scope.row)">解锁</el-button>
            </template>
        </el-table-column>
        </el-table>
        <el-pagination background layout="total, sizes, prev, pager, next" style="margin-top: 2%;"
            :page-sizes="[10, 20, 50]"
            @size-change="init"
            @current-change="init"
            v-model:page-size="queryForm.pageSize"
            v-model:current-page="queryForm.page"
            :total="totalData"
        />
    </div>

    <el-dialog v-model="detailDialog" title="用户详情">
        <el-form :model="detailForm">
            <el-form-item label="账号" prop="account" :label-width="formLabelWidth">
                <el-input v-model="detailForm.account" disabled/>
            </el-form-item>
            <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
                <el-input v-model="detailForm.name" disabled/>
            </el-form-item>
            <el-form-item label="邮箱" prop="mail" :label-width="formLabelWidth">
                <el-input v-model="detailForm.mail" disabled/>
            </el-form-item>
            <el-form-item label="注册时间" prop="createTime" :label-width="formLabelWidth">
                <el-input v-model="detailForm.createTime" disabled :formatter="formatterTime1"/>
            </el-form-item>
            <el-form-item label="修改时间" prop="updateTime" :label-width="formLabelWidth">
                <el-input v-model="detailForm.updateTime" disabled :formatter="formatterTime1"/>
            </el-form-item>
        </el-form>
    </el-dialog>

</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import { imageBaseURL, formatterTime, formatterTime1 } from "@/global"
const { proxy } = getCurrentInstance()

const queryForm = reactive({})
const totalData = ref(0)

// 详情
const detailDialog = ref(false)
const detailForm = reactive({})

const formLabelWidth = ref(80);


let tableData = ref([]);
const init = async () => {
	let params = Object.assign({}, queryForm);
    console.log(params)
	let result = await proxy.axios.post('user/list', params)
	if (!result) {
	    return;
	}
	tableData.value = result.list;
	totalData.value = result.total;
}
init();

const handleDetail = (idx, rowData) => {
	Object.assign(detailForm, rowData)
	detailDialog.value = true
}

// const handleLock = async (rowData) => {
// 	let result = await proxy.axios.get('user/lock?id=' + rowData.id)
// 	if (!result) {
// 		return
// 	}
// 	proxy.msg.success("锁定成功")
// 	init()
// }
// const handleUnLock = async (rowData) => {
// 	let result = await proxy.axios.get('user/unlock?id=' + rowData.id)
// 	if (!result) {
// 		return
// 	}
// 	proxy.msg.success("解锁成功")
// 	init()
// }
</script>

<style lang="scss" scoped>

</style>